<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>电影列表页面</title>
    <style type="text/css">
        table {
            border-collapse: collapse;
            margin: 0px auto 0px auto;
        }

        table th, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
    <script th:src="@{/script/vue.js}"></script>
</head>
<body>
<div id="app">
    <table>
        <thead>
        <tr>
            <th>电影ID</th>
            <th>电影名称</th>
            <th>电影票价格</th>
            <th>删除</th>
            <th>更新</th>
        </tr>
        </thead>
        <tbody th:if="${#lists.isEmpty(movieList)}">
        <tr>
            <td colspan="5">抱歉！没有查询到数据！</td>
        </tr>
        </tbody>
        <tbody th:unless="${#lists.isEmpty(movieList)}">
        <tr th:each="movie : ${movieList}">
            <td th:text="${movie.movieId}">电影ID</td>
            <td th:text="${movie.movieName}">电影名称</td>
            <td th:text="${movie.moviePrice}">电影票价格</td>
            <td>
                <a th:href="@{/movie/}+${movie.movieId}" @click="deleteMovie()">删除</a>
            </td>
            <td><a th:href="@{/movie/}+${movie.movieId}">更新</a></td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="5"><a th:href="@{/add.html}">添加</a></td>
        </tr>
        </tfoot>
    </table>
    <form id="deleteForm" method="post">
        <input type="hidden" name="_method" value="delete"/>
    </form>
</div>
<script>
    var vue = new Vue({
        "el":"#app",
        "methods":{
            deleteMovie(){
                //1. 阻止默认事件
                event.preventDefault()
                //2. 创建一个空表单:设置表单的action的值和当前a标签的路径一致
                var deleteForm = document.getElementById("deleteForm");
                deleteForm.action = event.target.href
                //3. 提交表单
                deleteForm.submit()
            }
        }
    });
</script>
</body>
</html>